// nav动画效果
angular.module('app').directive('uiNav', ['$timeout',
function($timeout) {
    return {
        restrict: 'AC',
        link: function(scope, el, attr) {
            var _window = $(window),
            _mb = 768,
            wrap = $('.app-aside'),
            next,
            backdrop = '.dropdown-backdrop';
            // unfolded
            el.on('click', 'a',
            function(e) {
                next && next.trigger('mouseleave.nav');
                var _this = $(this);
                _this.parent().siblings(".active").toggleClass('active');
                _this.next().is('ul') && _this.parent().toggleClass('active') && e.preventDefault();
                // mobile
                _this.next().is('ul') || ((_window.width() < _mb) && $('.app-aside').removeClass('show off-screen'));
            });

            // folded & fixed
            el.on('mouseenter', 'a',
            function(e) {
                next && next.trigger('mouseleave.nav');
                $('> .nav', wrap).remove();
                if (!$('.app-aside-fixed.app-aside-folded').length || (_window.width() < _mb) || $('.app-aside-dock').length) return;
                var _this = $(e.target),
                top,
                w_h = $(window).height(),
                offset = 50,
                min = 150;

                ! _this.is('a') && (_this = _this.closest('a'));
                if (_this.next().is('ul')) {
                    next = _this.next();
                } else {
                    return;
                }

                _this.parent().addClass('active');
                top = _this.parent().position().top + offset;
                next.css('top', top);
                if (top + next.height() > w_h) {
                    next.css('bottom', 0);
                }
                if (top + min > w_h) {
                    next.css('bottom', w_h - top - offset).css('top', 'auto');
                }
                next.appendTo(wrap);

                next.on('mouseleave.nav',
                function(e) {
                    $(backdrop).remove();
                    next.appendTo(_this.parent());
                    next.off('mouseleave.nav').css('top', 'auto').css('bottom', 'auto');
                    _this.parent().removeClass('active');
                });

                $('.smart').length && $('<div class="dropdown-backdrop"/>').insertAfter('.app-aside').on('click',
                function(next) {
                    next && next.trigger('mouseleave.nav');
                });

            });

            wrap.on('mouseleave',
            function(e) {
                next && next.trigger('mouseleave.nav');
                $('> .nav', wrap).remove();
            });
        }
    };
}]);